<!--
*@Author: QWP
*@Description: 关注企业的预警详情
*@Date: 2024-07-29 16:42:10
-->
<template>
  <a-layout>
    <a-layout-content class="f-margin-16">

      <u-busi-card title="基本信息" class="f-padding-b20">
        <a-row>
          <a-image :src="urlFile('index/focus_qy.png')" :preview="false" width="62px" height="62px">
          </a-image>
          <a-col flex="1" class="f-padding-l20">
            <a-row class="f-font-family" style="font-size: 22px;">
              <b>{{ form['companyName'] || '' }}</b>
            </a-row>
            <a-row>
              <a-col flex="1">
                <div style="margin-top: 20px; padding: 20px; background: #EFF7FF">
                  <u-form :model="form" 
                    :elements="getformEls" 
                    class="u-focus-firm-info f-font-family"
                    :loading="loading">
                    <template #riskLevel>
                      <ThunderboltOutlined :style="{ color: leverColor }" /> {{ levelText }}级
                    </template>
                    <template #cksp>
                      <VideoCameraOutlined @click="showLiveVedio = true"
                        style="color: #1890ff; font-weight: 800; font-size: 20px; cursor: pointer;" />
                    </template>
                    <template #outRow>
                      <a-button type="link" @click="isMore = !isMore">
                        {{ isMore == true ? "收起" : "更多企业信息" }}
                        <UpOutlined v-if="isMore" />
                        <DownOutlined v-else />
                      </a-button>
                    </template>
                  </u-form>
                </div>
              </a-col>
              <div class="f-padding-rl60 f-margin-tb20">
                <a-row class="f-font-family" style="color: #666;" justify="center">企业二维码</a-row>
                <a-row justify="center" class="f-margin-t20">
                  <a-qrcode :value="form['companyName'] || ''" size="112" class="u-firm-qrcode" />
                </a-row>
              </div>
            </a-row>
          </a-col>
        </a-row>
      </u-busi-card>

      <u-busi-card :title="h('div', [
        h('span', '综合预警情况'),
        h('span', { style: {color: 'red', marginLeft: '20px'} }, `共有预警数量：${pagenation.total} 条`)
      ])" >
        <u-table :columns="sumWarningCols" 
          :data="sumWarningData" 
          :loading="loading"
          :rowSelection="null"
          :scroll="{ y: '350px !important' }"
          v-model:pagination="pagenation"
          @change="getDetialInfo">
        </u-table>
      </u-busi-card>
      <u-busi-card title="截止当前预警趋势">
        <WarningChart :mineId="props.params.mineId" :show="props.show"  :loading="loading"/>
      </u-busi-card>
    </a-layout-content>
  </a-layout>

  <!-- 在线视频 -->
  <LiveVedio v-model:open="showLiveVedio" width="52%" />
</template>

<script lang='ts' setup>
import { ref, reactive, computed, onMounted, watch, useAttrs, h } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { urlFile, nullC, numberC } from '@/util/common'
import { _IFormEl, _IExtra } from '@/src/components/common/form/interface';
import { cloneDeep } from 'lodash';
import { levMainColor } from '@/views/index/emergencyIndex/data.ts'
import { Space } from 'ant-design-vue'
import { ThunderboltOutlined } from '@ant-design/icons-vue'
import WarningChart from './WarningChart.vue';
import LiveVedio from '@/views/oa/warning/sumWarning/LiveVideo.vue'
import { formatWarnLevel } from '@/views/oa/warning/sumWarning/utils.ts'
import * as sumWarningApi from '@/service/emergency/sumWarning'

const props = defineProps<{
  show: boolean,
  params: object
}>()

const arrts = useAttrs()

const leverColor = computed(() => levMainColor[numberC(form.value['riskLevel']) - 1])
const levelText = computed(() => {
  let text = { 1: '一', '2': '二', 3: '三', 4: '四' }
  return nullC(text[form.value['riskLevel']])
})

const loading = ref<boolean>(false)

const form = ref({})
const isMore = ref<boolean>(false);
const formItemProps: FormItemProps & _IExtra = {
  colon: true
}
const formEls: Array<_IFormEl> = [
  {
    label: '所在区域', key: 'address', col: { span: 8, }, element: 'text',
    formItemProps: { ...formItemProps }
  },
  {
    label: '当前风险等级', key: 'riskLevel', col: { span: 8 }, element: 'slot',
    formItemProps: { ...formItemProps, },
  },
  {
    label: '查看视频', key: 'cksp', col: { span: 8 }, element: 'slot',
    formItemProps: { ...formItemProps, },
  },
  {
    label: '行业类型', key: 'companyType', col: { span: 8 }, element: 'text',
    formItemProps: { ...formItemProps, },
  },
  {
    label: '统一信用代码', key: 'creditCode', col: { span: 8 }, element: 'text',
    formItemProps: { ...formItemProps, },
  },
  {
    label: '规模', key: 'scale', col: { span: 8 }, element: 'text',
    formItemProps: { ...formItemProps, },
  },
  {
    label: '组建时间', key: 'buildTime', col: { span: 8 }, element: 'text',
    formItemProps: { ...formItemProps, },
  },
  {
    label: '法人代表', key: 'legalPerson', col: { span: 8 }, element: 'text',
    formItemProps: { ...formItemProps, },
  },
  {
    label: '法人代表联系方式', key: 'legalPersonTel', col: { span: 8 }, element: 'text',
    formItemProps: { ...formItemProps, },
  },
  {
    label: '主要负责人', key: 'linkman', col: { span: 8 }, element: 'text',
    formItemProps: { ...formItemProps, },
  },
  {
    label: '主要负责人联系方式', key: 'linkmanTel', col: { span: 8 }, element: 'text',
    formItemProps: { ...formItemProps, },
  },
  {
    label: '安全管理负责人', key: 'aqglfzr', col: { span: 8 }, element: 'text',
    formItemProps: { ...formItemProps, },
  },
  {
    label: '安全管理负责人联系方式', key: 'aqglfzrlxfs', col: { span: 8 }, element: 'text',
    formItemProps: { ...formItemProps, },
  },
  {
    label: '安全管理人员', key: 'secureLeader', col: { span: 8 }, element: 'text',
    formItemProps: { ...formItemProps, },
  },
  {
    label: '安全管理人员联系方式', key: 'secureLeaderTel', col: { span: 8 }, element: 'text',
    formItemProps: { ...formItemProps, },
  },
  {
    label: '从业人数', key: 'employmentNumber', col: { span: 8 }, element: 'text',
    formItemProps: { ...formItemProps, },
  },
  {
    label: '企业人数量是否10人以下', key: 'isVeryLittle', col: { span: 8 }, element: 'text',
    formItemProps: { ...formItemProps, },
  },
  {
    label: '是否是集团公司', key: 'isGroupCompany', col: { span: 8 }, element: 'text',
    formItemProps: { ...formItemProps, },
  },
  {
    label: '行业管理部门', key: 'manageDept', col: { span: 8 }, element: 'text',
    formItemProps: { ...formItemProps, },
  },
  {
    label: '实际经营地址', key: 'address', col: { span: 8 }, element: 'text',
    formItemProps: { ...formItemProps, },
  },
  {
    label: '经营内容', key: 'businessScope', col: { span: 24 }, element: 'text',
    formItemProps: { ...formItemProps, },
  },
]
const getformEls = computed(() => {
  let temEls = cloneDeep(formEls)
  return isMore.value == false ? temEls.splice(0, 4) : temEls
})

// 综合预警情况
let pagenation = reactive({
  total: 0,
  current: 1,
  pageSize: 50,
  showTotal: total => `共 ${total} 条`
})
const searchF = reactive({});
const sumWarningData = ref<any[]>([]);
const sumWarningCols: Array<_IColumnProps> = [
  {
    dataIndex: "index", title: "序号", width: 50, align: 'center',
    customRender: ({ index }) => index += 1
  },
  { dataIndex: "warnType", title: "预警类型", width: 100 },
  { dataIndex: "warnSource", title: "预警来源", minWidth: 100 },
  { dataIndex: "deviceContent", title: "传感器预警内容", minWidth: 100 },
  { dataIndex: "personContent", title: "人员预警内容", minWidth: 100 },
  { dataIndex: "warnLevel", title: "预警等级", width: 150, align: 'center', 
    customRender: ({ text }) => {
      const text1 = {
        '一级': '1', '二级': '2', '三级': '3', '四级': '4'
      }
      return text ? formatWarnLevel(text1[text]) : ''
    }
  },
  { dataIndex: "warnDate", title: "预警开始时间 ", width: 150, align: 'center' },
  { dataIndex: "fkInfo", title: "企业反馈情况", width: 150 },
];

const showLiveVedio = ref<boolean>(false)

// 获取基本信息
const getDetialInfo = async () => {
  if(!props.params['mineId']) {
    return
  }
  loading.value = true;
  try {
    searchF.current = pagenation.current;
    searchF.size = pagenation.pageSize;
    searchF.mineId = nullC(props.params['mineId'])
    const res = await sumWarningApi.getWarnDetails(searchF)
    if (res.code == 0) {
      sumWarningData.value = res.data.warnDetailsList['records'] || []
      pagenation.total = numberC(res.data.warnDetailsList['total'])
      form.value = res.data.entity
      form.value.isVeryLittle = form.value.isVeryLittle == false ? '否' : '是'
    }
  } catch (error) { }
  loading.value = false;
}

watch(() => props.show, (nval, olva) => {
  if (nval == true) {
    getDetialInfo()
  }
}, { deep: true, immediate: true })

</script>

<style lang='scss' scoped>
:deep(.u-focus-firm-info) {
  .ant-form-item-label {
    label {
      font-size: var(--font-size-level-1);
      color: #666666;
    }
  }

  .ant-form-item-control-input-content {
    font-size: var(--font-size-level-1);
    color: #666666;
  }
}

:deep(.ant-qrcode) {
  border-radius: 16px;
  border: 1px solid #D9D9D9 !important;
}
</style>